<template>
	<view class="animate__animated animate__bounceInDown animate__fadeIn">
		<!-- <button type="default" @click="goLogin">去登陆页</button> -->
		<view class="home-bg" />
		<!-- 顶部用户登录模块 -->
		<view class="position-relative">
			<view class="home-user flex p-3" v-if="!userInfo" @click="$authJump('/pages-user/user-info/user-info')">
				<view class="home-avatar mr-3">
					<image src="../../../static/c1.png" mode="" />
				</view>
				<view class="home-user-login flex flex-column justify-center align-start text-white">
					<text class="font-md" @click="goLogin">立即登录</text>
					<text class="mt-2 font-sm">登录解锁更多功能</text>
				</view>
			</view>
			<view class="home-user flex p-3 align-center justify-center" v-else @click="$authJump('/pages-user/user-info/user-info')">
				<view class="home-avatar mr-3">
					<image :src="userInfo.avatar" mode="aspectFill" />
				</view>
				<view class="home-user-login flex flex-column justify-center align-start text-white flex-1">
					<text class="font-md">{{userInfo.nickname || userInfo.username || userInfo.phone}}</text>
					<text class="mt-2 font-sm">{{userInfo.desc || '暂无描述'}}</text>
				</view>
				<view class="iconfont icon-leimupinleifenleileibie text-white" style="font-size: 20px;"></view>
			</view>
		</view>
		<!-- icons模块 -->
		<view class="position-relative  px-3 mt-5">
			<icon-card :iconList="iconList"></icon-card>
		</view>
		<!-- 底部选项列表模块 -->
		<view class="position-relative mt-2 px-3">
			<uni-list :border="false">
				<uni-list-item clickable link @click="$authJump('/pages-user/my-coupon/my-coupon')">
					<!-- <template #header> -->
						<view class="flex align-center py-1" slot="header">
							<text class="iconfont icon-9" style="color:#1d7edd;" />
							<text class="ml-2 font">我的优惠券</text>
						</view>
					<!-- </template> -->
				</uni-list-item>
				<uni-list-item clickable link>
					<!-- <template #header> -->
						<view class="flex align-center py-1" slot="header">
							<text class="iconfont icon-help" style="color:#1d7edd;" />
							<text class="ml-2 font">常见问题</text>
						</view>
					<!-- </template> -->
				</uni-list-item>
				<uni-list-item clickable link @click="goSetting">
					<!-- <template #header> -->
						<view class="flex align-center py-1" slot="header">
							<text class="iconfont icon-set" style="color:#1d7edd;" />
							<view class="ml-2 font">设置</view>
						</view>
					<!-- </template> -->
				</uni-list-item>
			</uni-list>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				iconList:[{
					icon:"icon-OrderHistory",
					text:"订单",
					path:"/pages-order/order-list/order-list"
				},{
					icon:"icon-pinglun2",
					text:"消息"
				},{
					icon:"icon-shoucang1",
					text:"收藏"
				},{
					icon:"icon-e-learning-monitor",
					text:"在学",
					path:"/pages/tabbar/learn/learn",
					type:'switchTab'
				}]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.userInfo
			})
		},
		onNavigationBarButtonTap() {
			this.goSetting()
		},
		methods: {
			goLogin() {
				this.$navigateTo('/pages/login/login')
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			},
			goSetting() {
				this.$navigateTo('/pages-user/setting/setting')
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('@/common/iconfont.css');

	.home-bg {
		position: fixed;
		left: 0;
		right: 0;
		height: 350rpx;
		background-color: #5ccc84;
		border-bottom-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
	}

	.home-user {

		.home-avatar,
		image {
			width: 125rpx;
			height: 125rpx;
			background-color: skyblue;
			border: 1rpx solid #fff;
			border-radius: 125rpx;
		}
	}

	.home-icons {
		background-color: #fff;
		height: 150rpx;
	}
</style>
